<template>
    <div>
        <PageTitle>用户注册</PageTitle>
        <div class="pages-top pages-scroll-two">
            <div id="regist-text">
                <img id="regist-text-img" src="../../static/img/zhucefuli_wap.png">
                <span>注册立享</span><span style="color:#FF3600">300元</span><span>现金券</span>
            </div>
            <div id="msglogin">
                <input class="input-css" type="text" placeholder="手机号码" v-model.number="tel" @blur="telBlur">
                <div id="msglogin-flex">
                    <input id="msg" class="input-css" type="text" placeholder="暂无法使用此功能" disabled>
                    <button id="msg-button" class="button-css" disabled>获取短信验证码</button>
                </div>
                <input class="input-css" :type="isPsw?'text':'password'"  v-model="psw" placeholder="设置6-16位登录密码" @blur="pswBlur">
                <div @click="isPsw=!isPsw" id="psw"><img :src="isPsw?'../../static/icon/显示密码_icon.svg':'../../static/icon/隐藏密码.svg'"></div>
                <button @click="registClick"  :class="{'button-css':true,'isbg':isTrue}" :disabled="isTrue">立即注册</button>
                
            </div>
        </div>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";

export default {
    components:{PageTitle},
    data(){
        return {
            isPsw:false,
            tel:null,
            psw:null,
        }
    },
    computed:{
        isTrue(){
            var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if(!reg.test(this.tel)){
                return true;
            }
            var reg = /^[a-zA-Z\d_]{6,16}$/;
            if(!reg.test(this.psw)){
                return true;
            }
            return false;
        }
    },
    methods:{
        telBlur(){
            var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if(!reg.test(this.tel)){
                this.$vux.toast.show({
                    type:"text",
                    width:"80vw",
                    text:"你输入的手机格式有误，请重新输入！"
                })
            }
        },
        pswBlur(){
            var reg = /^[a-zA-Z\d_]{6,16}$/;
            if(!reg.test(this.psw)){
                this.$vux.toast.show({
                    type:"text",
                    width:"80vw",
                    text:"密码格式错误，密码长度为6-16位！"
                })
            }
        },
        registClick(){
            var data = {
                tel:this.tel,
                psw:this.psw
            }
            this.$store.dispatch("requestRegist",data);
        }
    }
}
</script>
<style scoped>
    #regist-text{
        margin: 5.6vw 3.92vw;
        color: #999999;
    }
    #regist-text-img{
        width: 4.48vw;
        
    }
    #msglogin{
        margin: 3.92vw;
        position: relative;
    }
    #msg{
        width: 55%;
    }
    #msg-button{
        width: 40%;
        background-color: gainsboro;
    }
    #msglogin-flex{
        display: flex;
        justify-content: space-between;
    }
    #psw{
        position: absolute;
        width: 5.6vw;
        right: 5vw;
         top: 44vw; 
        z-index: 10;
    }
    #psw img{
        width: 100%;
    }
    
</style>